feat: dark mode support (candlelit morgue theme)#26
Conversation
|
@itxashancode is attempting to deploy a commit to the Dotsystems 9999 Team on Vercel. A member of the Team first needs to authorize it. |
|
|
|
Thanks so much for this — candlelit morgue theme is exactly the kind of energy this project needs! 🕯️ I'm having merge conflicts because The conflicting files are mostly:
Could you rebase your branch onto current git checkout feat/dark-mode
git fetch upstream
git rebase upstream/main
# resolve conflicts (mostly favoring upstream for footer/about)
git push --force-with-leaseOnce rebased I'll review and merge. Really appreciate the contribution. 🦥 |
|
Merged manually into main as 8aae18c after rebasing onto recent changes (open-source footer + /faq page + extension). Conflicts were in next.config.mjs, layout.tsx, page.tsx, and SiteFooter.tsx — resolved while preserving both your dark-mode work and the recent main additions. Credit retained in commit metadata. Thanks for the work! 🕯️ |
2 participants
Closes #13
What's in here
Added full dark mode support. The site was previously parchment-only — now it respects your system preference and remembers your manual choice across sessions.
The toggle
There's a candle/bulb toggle (🕯️ / 💡) sitting in the top banner so it's always reachable without scrolling. It's also in the footer. Both stay in sync.
How the theme works
On first load, a small inline script runs before React kicks in. It reads from localStorage (if you've toggled before) or falls back to prefers-color-scheme. This means zero flash — the right theme is applied before anything paints.
The tag gets a data-theme attribute (light or dark) and all colours are driven off CSS custom properties on :root / [data-theme="dark"]. No JavaScript is needed to repaint anything once the CSS is loaded.
Dark palette
Goes for something atmospheric rather than just inverting the light theme:
Components updated
Every component that had hardcoded hex colours has been migrated to var(--c-*) tokens. This includes the certificate UI, dashboard, hall of fame, and loading states.
Bug fixes bundled in